<template>
  <div class="home">
    <div class="box1">
      <div class="card">
      
        <div class="info1">
          <div class="head"><img :src="usersInfo.pic" alt="" /></div>
          <div class="name">
            <div>{{ usersInfo.name }}</div>
            <div></div>
          </div>
          <div class="caidan">
            <div>余额:{{ usersInfo.balance }}</div>
            <div>积分:{{ usersInfo.integral }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="box2" v-if="params.type == 1">
      <div class="redioB">
        <div style="padding-bottom: 0rem">服务类型：</div>
        <van-radio-group v-model="radio" direction="horizontal">
          <van-radio :name="1">服装</van-radio>
          <van-radio :name="2">饮品</van-radio>
        </van-radio-group>
      </div>
      <div class="redioB" v-if="radio == 1">
        <div style="padding-bottom: 0rem">使用积分：</div>
        <van-radio-group v-model="integral" direction="horizontal">
          <van-radio :name="1">是</van-radio>
          <van-radio :name="2">否</van-radio>
        </van-radio-group>
      </div>

      <div>
        <van-field
          label="金额："
          type="number"
          v-model="money"
          placeholder="请输入消费金额"
        />
      </div>
    </div>
    <div class="box3" v-if="params.type == 2">
      <div class="title">
        {{ card.title }}
      </div>
      <div class="cont">
        {{ card.desc }}
      </div>
      <div style="margin-bottom: 2rem">
        <van-field
          label="金额："
          type="number"
          v-model="money"
          placeholder="请输入消费金额"
        />
      </div>
      <div class="date">{{ card.startime }}-{{ card.endtime }}</div>
    </div>
    <div class="buts">
      <van-button @click="sub">提交</van-button>
    </div>
  </div>
</template>
<script>
import {hideWxMenu } from '@/assets/js/tools'
import { mapState, mapActions } from "vuex";
import vueQr from "vue-qr";

import VueBarcode from "vue-barcode";
let t;
export default {
  components: {
    vueQr,
    barcode: VueBarcode,
  },
  name: "home",
  data() {
    return {
      radio: 1,
      integral: 1,
      showQRCode: false,
      phone: "",
      sms: "",
      openid: "",
      userinfo: "",
      //二维码
      downloadData: {
        url: "",
        icon: "",
      },
      params: {},
      money: "",
      usersInfo: {},
      card: {},
    };
  },
  mounted() {
    t = this;
    
     hideWxMenu()
    if (!t.usersDetail.id) {
      t.GetUsersDetail({ openid: localStorage.getItem("openid") });
    }

    t.params = t.$route.params;
    if (t.params.number && t.params.type && t.params.openid) {
      t.getList();
    } else {
      return t.$toast("不是有效的二维码");
    }
  },
  computed: {
    ...mapState(["usersDetail"]),
  },
  methods: {
    ...mapActions(["GetUsersDetail"]),
    sub() {
     
        if (!t.money) {
          return t.$toast("请输入消费金额");
        } else if (t.money <= 0) {
          return t.$toast("金额不能小于零");
        } 
  

      let d = {
        openid: t.usersDetail.openid,
        type: t.params.type,
        number: t.params.number,
        money: t.money,
      };
      if (t.params.type == 1) {
        d.hxtype = t.radio;

        if (t.radio == 1) {
          d.integral = t.integral;
        }
      }

      t["$API"]["userWriteHx"](d).then((res) => {
        if (res.code == 200) {
          t.$toast(res.msg);
          setTimeout(
            (t) => {
              t.$router.go(-1);
            },
            500,
            t
          );
        }
      });
    },
    getList() {
      t["$API"]["userWrite"](t.params).then((res) => {
        if (res.code == 200) {
          if (t.params.type == 1) {
            t.usersInfo = res.data.user;
          } else if (t.params.type == 2) {
            t.usersInfo = res.data.user;
            t.card = res.data.card;
          }
        }
      });
    },
    linkTo(url) {
      t.$router.push({ name: url });
    },
    replaceQRCode() {
      t.showQRCode = true;

      t.downloadData.url = t.usersDetail.number;
    },
  },
};
</script>
<style scoped lang="less">
.home {
  height: 100vh;
  background: #ededed;
}

.box2 {
  margin: 0.5rem 0;
  padding: 1rem;
  background: white;
  > .redioB {
    display: flex;
    align-items: center;
    > div {
      color: #646566;
      font-size: 0.8rem;
      margin-bottom: 1.5rem;
    }
  }
}
/deep/ .van-radio__label {
  color: #646566;
  font-size: 0.8rem;
}
.box1 {
  background: white;
  padding: 1rem 0;

  // background: red;
  // border: 1px solid black;
  // box-shadow: 0 0 1px black;

  > .card {
    margin: 0 1rem 1rem;
    border-radius: 0.5rem;
    box-sizing: border-box;
    background: #376157;
    background-image: linear-gradient(45deg, #376157, #00b894);
    padding: 1rem;

    position: relative;
    > .info1 {
      display: flex;
      align-items: center;
      > .head {
        img {
          width: 3.5rem;
          border-radius: 50%;
        }
      }
      > .name {
        padding-left: 1rem;
        flex: 1;
        > div {
          color: white;
          line-height: 1.5rem;
        }
      }
      > .caidan {
        color: white;
        > div {
          text-align: right;
          line-height: 1.5rem;
        }
      }
    }
    .info2 {
      display: flex;
      align-items: center;

      color: white;
      > div {
        position: absolute;
        bottom: 1rem;
      }
      > div:nth-child(2) {
        right: 1rem;
      }
    }
  }

  .price {
    display: flex;
    align-items: center;

    flex-wrap: wrap;
    > div {
      width: 33%;
      text-align: center;
      > div:nth-child(1) {
        color: red;
      }
      > div:nth-child(2) {
        color: #676767;
      }
    }
    > div:nth-child(2) {
      border-left: 1px solid #ebebeb;
      border-right: 1px solid #ebebeb;
    }
  }
}

.van-field__label {
  width: 3.2em;
}
/deep/ .van-cell {
  padding: 0;
}
.buts {
  display: flex;
  position: fixed;
  bottom: 1rem;
  width: 100%;
  justify-content: center;
  > button {
    width: 90%;
    background: #376157;
    background-image: linear-gradient(45deg, #376157, #00b894);
    color: white;
  }
}
/deep/ .van-radio__icon--checked .van-icon {
  background: #376157;
  background-image: linear-gradient(45deg, #376157, #00b894);
}
.box3 {
  margin: 0.5rem 0;
  padding: 1rem;
  background: white;
  > .title {
    text-align: center;
    margin-bottom: 1rem;
  }
  > .cont {
    line-height: 1.5rem;
    color: #666666;
    text-align: justify;
    margin-bottom: 1rem;
  }
  > .date {
    font-size: 0.7rem;
    color: #666666;
  }
}

/deep/ .van-field__label {
  width: 3rem;
}


</style>
 